<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>World Cup</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="js/plugins/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-md-5">
        <a href="#" title="World Cup">
            <img src="img/logo/logo.png">
        </a>
    </div>
    <div class="col-md-5">
    </div>
    <div class="col-md-2">
        ${user}
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="widget style1 navy-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-futbol-o fa-4x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 近期场次</span>
                        <h2 class="font-bold" id="todayMatchs">0</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="widget style1 lazur-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-user fa-4x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 竞猜人数 </span>
                        <h2 class="font-bold" id="userCount">0</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="widget style1 yellow-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-trophy fa-4x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 排 名 </span>
                        <h2 class="font-bold" id="myRank">0</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="widget style1 red-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-star fa-4x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 积 分 </span>
                        <h2 class="font-bold" id="myPoint">0</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span>  </span>
                    <button id="detailBolckBtn" type="button" class="btn btn-xs btn-primary pull-right"
                            onclick="listMatch()">查看赛程
                    </button>
                    <h5>竞猜列表</h5>
                </div>
                <div class="ibox-content">
                    <table id="todayMatchList" data-mobile-responsive="true" class="table table-no-bordered">
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span id="matchGuessState" class="label label-info pull-right">未竞猜</span>
                            <h5>比赛信息</h5>
                        </div>
                        <div class="ibox-content">
                            <form class="form-horizontal">
                                <input id="guessMatchId" type="hidden">
                                <div class="text-center">
                                    <div class="widget style1 lazur-bg">
                                        <div class="row vertical-align">
                                            <div class="col-xs-3">
                                                <i class="fa fa-star-half-o fa-3x"></i>
                                            </div>
                                            <div class="col-xs-9 text-right">
                                                <h2 class="font-bold" id="playExplain"></h2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <div class="widget style1 lazur-bg">
                                        <div class="row vertical-align">
                                            <div class="col-xs-5 text-left">
                                                <h2 class="font-bold" id="hostTeamName"></h2>
                                            </div>
                                            <div class="col-xs-2 text-center">
                                                <h2 class="font-bold">VS</h2>
                                            </div>
                                            <div class="col-xs-5 text-right">
                                                <h2 class="font-bold" id="guestTeamName"></h2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--<i class="badge badge-primary badge-4x" id="playExplain"></i>-->
                                <div class="text-center">
                                    <div class="widget style1 lazur-bg">
                                        <div class="row vertical-align">
                                            <div class="col-xs-6 font-bold">
                                                <input type="text" id="myHostTeamPoint" name="myHostTeamPoint"
                                                       class="form-control" placeholder=""
                                                       style="color: #555!important;text-align: center;font-size: 20pt;">
                                            </div>
                                            <div class="col-xs-6 font-bold">
                                                <input type="text" id="myGuestTeamPoint" name="myGuestTeamPoint"
                                                       class="form-control" placeholder=""
                                                       style="color: #555!important;text-align: center;font-size: 20pt;">
                                                <!--<h2 class="font-bold" id="playExplain"></h2>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <div class="widget style1 lazur-bg" style="margin:0;padding:0;">
                                        <div class="row vertical-align" style="width: 100%;height: 100%;margin:0;">
                                            <button id="guessBtn" type="button"
                                                    class="btn btn-lg btn-info btn-block ladda-button"
                                                    data-style="zoom-out" style="margin:0;"><strong>竞 猜</strong>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <button id="refreshScoreList" type="button" class="btn btn-xs btn-info pull-right"
                                    onclick="refreshScoreList()">刷新
                            </button>
                            <h5>积分榜</h5>
                        </div>
                        <div class="ibox-content">
                            <table id="scoreList" data-mobile-responsive="true" class="table table-no-bordered">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <!--<span>  </span>-->
                            <!--<button id="myGuessMatch" type="button" class="btn btn-xs btn-primary pull-right"-->
                            <!--onclick="listMatch()">参与场次: 6-->
                            <!--</button>-->
                            <button id="refreshMyGuess" type="button" class="btn btn-xs btn-info pull-right"
                                    onclick="refreshMyGuess()">刷新
                            </button>
                            <h5>我的积分列表</h5>
                        </div>
                        <div class="ibox-content">
                            <span id="myGuessMatch" class="label label-warning pull-left">竞猜场次: 0</span>
                            <table id="myPointTable" data-mobile-responsive="true" class="table table-no-bordered">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
</div>
<div class="modal inmodal fade" id="allMatch" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 1080px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">赛程信息</h4>
                <!--<small class="font-bold"></small>-->
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-beginmatch" aria-expanded="true">比赛列表</a>
                        </li>
                        <!--<li class=""><a data-toggle="tab" href="#tab-endmatch" aria-expanded="true">已结束</a>-->
                        <!--</li>-->
                    </ul>
                    <div class="tab-content">
                        <div id="tab-beginmatch" class="tab-pane active">
                            <div class="panel-body">
                                <table id="allMatchList" data-mobile-responsive="true"
                                       class="table table-no-bordered">
                                </table>
                            </div>
                        </div>
                        <!--<div id="tab-endmatch" class="tab-pane">-->
                        <!--<div class="panel-body">-->
                        <!--<table id="endMatchList" data-mobile-responsive="true" class="table table-no-bordered">-->
                        <!--</table>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="js/app/index.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/plugins/ladda-bootstrap-master/dist/spin.min.js"></script>
<script src="js/plugins/ladda-bootstrap-master/dist/ladda.min.js"></script>
<!--<script src="js/plugins/selectpicker/bootstrap-select.min.js"></script>-->
<!--<script src="js/plugins/selectpicker/i18n/defaults-zh_CN.min.js"></script>-->
</body>

</html>